<template>
  <div class="app-search">
    <form action="/">
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        show-action
        @focus="onFocus"
        @blur="onBlur"
        @search="onSearch"
        @cancel="onCancel"
        @clear="onClear"
      />
    </form>
    <div class="history-area" v-if="isHistoryShow">
      <div class="first-line">
        <span class="title">搜索历史</span>
        <span class="icon-delete" @click="clearHistroy"></span>
      </div>
      <ul class="history-list">
        <li class="item" v-for="(item, index) in historyList" :key="index" @click="historySearch(item)">
          <span class="text">{{ item }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import storage from 'good-storage'
import { saveSearch } from './cache'
export default {
  name: 'app-search',
  props: {
    // 本地存储的标识KEY
    storageKey: {
      type: String,
      required: true
    },
    // 父组件传递的搜索词
    searchStr: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      value: this.searchStr || '',
      // 是否获取了焦点
      isFocus: false,
      // 历史记录是否显示
      isHistoryShow: false,
      // 历史搜索记录列表
      historyList: []
    }
  },
  methods: {
    // 输入框获取焦点
    initPage() {
      this.isFocus = false
      // 初始化数据
      this.historyList = []
      // 获取本地存储中的历史记录
      let historyList = storage.session.get(this.storageKey) || []
      // 赋值
      this.historyList = historyList
      // 如果历史记录数组不为空
      if (historyList.length > 0) {
        this.isHistoryShow = true
      } else {
        this.isHistoryShow = false
      }
    },
    // 清空历史记录
    clearHistroy() {
      // 清空搜索列表
      storage.session.remove(this.storageKey)
      // 置空数据
      this.historyList = []
      // 隐藏历史记录面板
      this.isHistoryShow = false
    },
    // 点击历史记录
    historySearch(item) {
      // 给搜索框赋值
      this.value = item
      // 隐藏历史记录
      this.isHistoryShow = false
      // 触发搜索函数
      this.onSearch()
    },
    onSearch() {
      // 点击焦点
      this.isFocus = true
      // 当搜索的数据不为空
      this.value && saveSearch(this.storageKey, this.value)
      // 给父组件传值
      this.$emit('onSearch', this.value)
    },
    // 返回上一级页面
    onCancel() {
      this.$router.go(-1)
    },
    // 获得焦点
    onFocus() {
      console.log('得到焦点')
      // 获得焦点时初始化组件
      this.initPage()
      this.$emit('isHistoryShow', this.isHistoryShow)
    },
    // 失去焦点
    onBlur() {
      // 显示历史记录
      this.isHistoryShow = false
      this.$emit('isHistoryShow', this.isHistoryShow)
    },
    // 清除搜索词
    onClear() {
      this.$emit('clear')
    }
  },
  // 如果父组件有传递搜索词，直接执行一次搜索
  created() {
    this.searchStr && this.onSearch()
    // 主动获取焦点
    this.onFocus()
  }
}
</script>

<style lang="less" scoped>
.app-search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  .van-search {
    padding: 6px 0 6px 15px;
  }
  .van-search__action {
    color: #2f77f1;
    font-size: 16px;
    font-weight: 500;
  }
  .history-area {
    padding: 10px;
    box-sizing: border-box;
    width: 95%;
    margin: 10px auto;
    background: #fff;
    border-radius: 8px;
    .first-line {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .title {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
      .icon-delete {
        width: 18px;
        height: 18px;
        background-image: url('./delete.png');
        background-size: 100% 100%;
        display: inline-block;
      }
    }
    .history-list {
      margin-top: 15px;
      .item {
        display: inline-block;
        padding: 6px 10px;
        box-sizing: border-box;
        margin: 5px;
        background: #f9f9f9;
        border-radius: 17px;
        height: 30px;
        position: relative;

        .text {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 17px;
        }
      }
    }
  }
}
</style>
